// ============ 全局变量 ============
const url = "/api/rest/user";
// 获取新增表单DOM（修正：确保HTML中表单ID是 add-form，而非 dept-form）
let addForm = document.getElementById('add-form'); 
let gridInstance = null;
let userData = null;
let editForm = document.getElementById('edit-form'); // 提前获取编辑表单，避免后续null

// ============ 左侧导航高亮逻辑（核心：角色管理高亮） ============
function highlightSidebar() {
    // 获取当前页面路径（如 role.html、user.html）
    const currentPage = window.location.pathname.split('/').pop();
    // 页面与导航ID的映射
    const navMap = {
        'user.html': 'userManagementLink',
        'department.html': 'departmentManagementLink',
        'role.html': 'roleManagementLink', // 角色管理页对应此ID
        'profile.html': 'profileLink'
    };
    // 移除所有导航的active类
    document.querySelectorAll('#sidebar-nav .nav-link').forEach(link => {
        link.classList.remove('active');
    });
    // 强制高亮角色管理（无论当前页面，若要固定高亮则直接用这行）
    // 注释掉上面的映射逻辑，直接高亮角色管理：
    document.getElementById('roleManagementLink')?.classList.add('active');
    // 若要按页面自动高亮，取消下面注释，注释上面这行：
    // const targetLinkId = navMap[currentPage];
    // if (targetLinkId) document.getElementById(targetLinkId)?.classList.add('active');
}

// 列表表头及操作按钮配置
const columns = [
    { name: '#', id: 'id', width: '8%' },
    { name: '用户名', id: 'username', sort: true },
    { name: '姓名', id: 'name', sort: true },
    { name: '邮箱', id: 'email', sort: true },
    { name: '电话', id: 'phone', sort: true },
    { name: '创建时间', id: 'createAt', sort: true },
    { name: '状态', id: 'enableState', sort: true },
    { name: '部门', id: 'dept.name', sort: true },
    {
        name: '操作',
        id: 'actions',
        width: '20%',
        formatter: (_, row) => gridjs.html(`
            <button type="button" data-bs-toggle="modal" data-bs-target="#editModal" class="btn btn-sm btn-outline-primary m-1"><i class="fas fa-edit" ></i> 编辑</button>
            <button type="button" onclick="toggle('${row.cells[0].data}')" class="btn btn-sm btn-outline-${row.cells[6].data === '启用' ? 'danger' : 'success'} m-1"><i class="fas fa-exchange" ></i> ${row.cells[6].data === '启用' ? '停用' : '启用'}</button>
        `)
    }
];

// gridOptions 提前定义（修复“未初始化”错误）
const gridOptions = {
    columns: columns,
    server: {
        url: url,
        then: data => {
            userData = data.content;
            return data.content.map(user => [
                user.id,
                user.username,
                user.name,
                user.email,
                user.phone,
                user.createAt,
                user.enableState,
                user.dept.name
            ]);
        },
        total: data => data.totalElements
    },
    pagination: {
        limit: 5, // 每页5条
        server: {
            url: (prev, page, limit) => addQueryParam(prev, `size=${limit}&page=${page}`)
        }
    },
    search: false,
    sort: true,
    language: {
        pagination: {
            previous: '上一页',
            next: '下一页',
            showing: '显示第',
            of: '条，共',
            to: '至',
            results: '条记录'
        }
    }
};

// ============ 工具函数 ============
// 在url末尾添加请求参数
function addQueryParam(url, param) {
    let separator = url.indexOf('?') !== -1 ? '&' : '?';
    return url + separator + param;
}

// 表单数据转JSON
function formJsonData(form) {
    const jsonData = {};
    const formData = new FormData(form);
    formData.forEach((value, key) => {
        if (!jsonData[key]) {
            jsonData[key] = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key);
        }
    });
    return jsonData;
}

// ============ 表格初始化（修复执行顺序问题） ============
function initGrid() {
    if (gridInstance) {
        gridInstance.destroy(); // 销毁旧实例
    }
    // 使用提前定义的gridOptions
    gridInstance = new gridjs.Grid(gridOptions).render(document.getElementById("gridjs-container"));
}

// ============ 获取部门列表 ============
function initDept() {
    if (!addForm || !editForm) return; // 避免DOM不存在报错
    fetch('/api/rest/dept/all')
        .then(response => response.json())
        .then(data => {
            const addDeptSelect = addForm.querySelector('[name="deptId"]');
            const editDeptSelect = editForm.querySelector('[name="deptId"]');
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.innerText = item.name;
                addDeptSelect.appendChild(option.cloneNode(true));
                editDeptSelect.appendChild(option.cloneNode(true));
            });
        })
        .catch(error => console.error('获取部门失败:', error));
}

// ============ 获取角色列表 ============
function initRole() {
    if (!addForm || !editForm) return;
    fetch('/api/rest/role/all')
        .then(response => response.json())
        .then(data => {
            const addRoleSelect = addForm.querySelector('[name="roleId"]');
            const editRoleSelect = editForm.querySelector('[name="roleId"]');
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.innerText = item.name;
                addRoleSelect.appendChild(option.cloneNode(true));
                editRoleSelect.appendChild(option.cloneNode(true));
            });
        })
        .catch(error => console.error('获取角色失败:', error));
}

// ============ 状态切换 ============
function toggle(id) {
    fetch(`${url}/${id}/toggle`, { method: 'PATCH' })
        .then(() => gridInstance.forceRender())
        .catch(error => console.error('状态切换失败:', error));
}

// ============ 退出登录 ============
function logout() {
    if (confirm('确定要退出登录吗？')) {
        localStorage.removeItem('token');
        localStorage.removeItem('userInfo');
        window.location.href = 'login.html';
    }
}

// ============ 页面加载完成后执行（核心入口） ============
document.addEventListener('DOMContentLoaded', function() {
    // 1. 优先高亮左侧角色管理
    highlightSidebar();
    
    // 2. 初始化表格（修复执行顺序）
    initGrid();
    
    // 3. 初始化部门/角色下拉框
    if (addForm && editForm) {
        initDept();
        initRole();
    }

    // 4. 编辑表单填充逻辑
    if (gridInstance) {
        gridInstance.on('cellClick', (...args) => {
            const event = args[0];
            const userId = args[3]?.cells[0]?.data; // 增加空值保护
            if (!userId || !userData || !editForm) return;
            
            const user = userData.find(i => i.id === userId);
            if (user && event.target) {
                editForm.elements['id'].value = userId;
                editForm.querySelector('[name="username"]').value = user.username || '';
                editForm.querySelector('[name="name"]').value = user.name || '';
                editForm.querySelector('[name="phone"]').value = user.phone || '';
                editForm.querySelector('[name="email"]').value = user.email || '';
                editForm.querySelector('[name="deptId"]').value = user.dept?.id || '';
                editForm.querySelector('[name="roleId"]').value = user.role?.id || '';
            }
        });
    }

    // 5. 搜索表单提交事件（修复deptEventListener笔误）
    const searchForm = document.getElementById('search-form');
    if (searchForm) {
        searchForm.addEventListener('submit', (event) => {
            event.preventDefault();
            const formData = new FormData(searchForm);
            const searchParams = new URLSearchParams(formData);
            const params = searchParams.toString();
            gridOptions.server.url = addQueryParam(url, params);
            gridInstance.updateConfig(gridOptions).forceRender();
        });
    }

    // 6. 新增表单提交事件（修复deptEventListener笔误）
    if (addForm) {
        addForm.addEventListener('submit', (event) => {
            event.preventDefault();
            if (addForm.checkValidity()) {
                const jsonData = formJsonData(addForm);
                fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(jsonData)
                }).then(response => {
                    if (response.ok) {
                        const addModal = bootstrap.Modal.getInstance(document.getElementById('addModal'));
                        if (addModal) addModal.hide();
                        initGrid();
                        Toastify({
                            text: "成功添加新用户",
                            duration: 3000,
                            close: true,
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                            style: { borderRadius: "10px" }
                        }).showToast();
                    } else {
                        response.json().then(data => {
                            alert(data.message, 'danger', document.getElementById('alertAddMessage'));
                        });
                    }
                }).catch(error => console.error('新增用户失败:', error));
            } else {
                addForm.classList.add('was-validated');
            }
        });
    }

    // 7. 编辑表单提交事件（修复deptEventListener笔误）
    if (editForm) {
        editForm.addEventListener('submit', (event) => {
            event.preventDefault();
            if (editForm.checkValidity()) {
                const jsonData = formJsonData(editForm);
                fetch(`${url}/${jsonData.id}`, {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(jsonData)
                }).then(response => {
                    if (response.ok) {
                        const editModal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
                        if (editModal) editModal.hide();
                        initGrid();
                        Toastify({
                            text: "编辑用户成功",
                            duration: 3000,
                            close: true,
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                            style: { borderRadius: "10px" }
                        }).showToast();
                    } else {
                        response.json().then(data => {
                            alert(data.message, 'danger', document.getElementById('alertEditMessage'));
                        });
                    }
                }).catch(error => console.error('编辑用户失败:', error));
            } else {
                editForm.classList.add('was-validated');
            }
        });
    }

    // 8. 文件上传事件（修复deptEventListener笔误）
    const fileInput = document.getElementById('e_fileInput');
    if (fileInput) {
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (!file) return;
            const formData = new FormData();
            formData.append('file', file);
            formData.append('type', '头像');
            fetch('/api/rest/attachment', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
              .then(data => {
                  if (editForm) editForm.querySelector('[name="avatar"]').value = data.id || '';
              }).catch(error => console.error('上传失败:', error));
        });
    }
});

// ============ 兼容原代码的冗余函数（可选删除） ============
function deptQueryParam(url, param) {
    return addQueryParam(url, param); // 兼容原代码的命名
}